<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--    <meta name="description" content="">-->
<!--    <meta name="author" content="">-->

    <title>全球新型冠状病毒实时数据统计</title>
<!--    一些框架组件依赖-->
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
            integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw"
            crossorigin="anonymous"
    />
    <script
            src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
            integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
            crossorigin="anonymous"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<!-- design style-->
    <style type="text/css">

        body{
            width: 100%;
            height: 100%;
        }
        .titlec{
            text-align: center;
            height: 50px;
        }
        .allTotal{
            height:200px;
            width: 35%;
            float: left;
            text-align: center;
            margin-left: 10%;
            line-height: 60px;
            background-color: rgba(106, 177,256, 0.1);

        }
        .NewTotal{
            height:200px;
            width: 35%;
            float: right;
            text-align: center;
            margin-right: 10%;
            line-height: 60px;
            background-color: rgba(106, 177,256, 0.1);

        }
        .emty{
            height: 200px;
        }
        .emty2{
            height: 50px;
        }
        .all{
            width: 90%;
            align: center;
            padding-left:5%;
        }
    </style>
</head>

<body>


<div class="all" >
    <div>
        <div class="titlec">
           <h1 th:text="(${country}==null?'全球':${country})+'新型冠状病毒实时数据统计'"></h1>
        </div>
        <div >
            <p class="lead" style="text-align: center;" >
                当前时间：<span th:text="${datenow}"></span>
            </p>
            <div class="emty2" >
            </div>
            <div class="allTotal"  >
                <p>
                 <h3 th:text="'截至此刻'+(${country}==null?'全球':${country})+'新冠肺炎确诊病例数:'"></h3>
                 <h1 style="color: darkred" th:text="${totalReportCases}"></h1>
                </p>
            </div>

            <div class="NewTotal"  >
                <h3 th:text="'与前一日比较新增'+(${country}==null?'全球':${country})+'新冠肺炎确诊病例数:'"></h3>
                <h1 style="color: darkred" th:text="${totalNewCases}"></h1>
            </div>

        </div>
        <div class="emty" >

        </div>
        <div class="mdui-typo">
            <hr/>
        </div>

       <div class="mdui-textfield mdui-textfield-expandable">
        <button class="mdui-textfield-icon mdui-btn mdui-btn-icon" ><i class="mdui-icon material-icons">search</i></button>
        <input class="mdui-textfield-input" type="text" placeholder="搜索国家或地区" th:action="@{countryn}" />
        <button class="mdui-textfield-close mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">close</i></button>
        </div>
        <div class="emty2" >

        </div>
        <div >
            <div class="mdui-table-fluid" >
                <table class="mdui-table mdui-table-hoverable" >
                    <thead>
                    <tr>
                        <th>州/省</th>
                        <th>国家</th>
                        <th>最新累计病例</th>
                        <th>较昨新增病例</th>
                    </tr>
                    </thead>
                    <div th:each="regionObj:${regionStats}">
                        <tr>
                            <td align="center" th:text="${regionObj.state}"></td>
                            <td align="center" th:text="${regionObj.country}"></td>
                            <td align="center" th:text="${regionObj.latestTotalCases}"></td>
                            <td align="center" th:text="${regionObj.diffFromPrevDay}"></td>
                        </tr>
                    </div>
                </table>
            </div>
        </div>
        <div style="height: 50px">

        </div>
    </div>
</div>
</body>

</html>